<template>
  <div class="container">
    <div class="header">
      <el-row>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label">库区名称</div>
          <el-input
            v-model="page.areaName"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label">库位名称</div>
          <el-input v-model="page.name" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label">库位状态</div>
          <el-select
            v-model="status"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in wareStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label"></div>
          <div class="labelbutton">
            <button class="penpel searchbutton" @click="searchPag">搜索</button>
            <button class="penpel resetbutton" @click="resetPag">重置</button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <el-row>
        <el-col :span="18">
          <button
            class="addbutton penpel"
            @click="$router.push('/manageinfo/addlocation')"
          >
            新增库位
          </button>
        </el-col>
        <el-col :span="6">
          <button class="penpel resetbutton" @click="exportExcel">下载库区模板</button>
          <button class="penpel resetbutton" @click="importExcel">导入库区信息</button>
        </el-col>
      </el-row>
      <div class="content_table">
        <WareTable
          v-if="tableData.length > 0"
          :tableData="tableData"
          v-loading="loading"
          @StatusShow="StatusShow"
        />
        <EmptyTip v-else />
      </div>
      <MyPagination
        v-if="tableData.length > 0"
        :page="page"
        :total="Number(total)"
        @updateSize="updateSize"
        @updateuCrrent="updateuCrrent"
      />
    </div>
    <StatusDialog
      ref="StatusDialog"
      :dialogVisible.sync="dialogVisible"
      @updataArea="getLocation"
    />
    <ImportExcel :importVisible.sync="importVisible" @updataArea="getLocation" />
  </div>
</template>

<script>
import { getLocation } from '@/api/location'
import ImportExcel from './components/importExcel.vue'
import StatusDialog from './components/StatusDialog.vue'
import WareTable from './components/WareTable.vue'
import EmunList from '@/constant/warehouse'
import areaEmun from '@/constant/area'
import locationEmun from '@/constant/location'
export default {
  name: 'MangeLocation',
  components: {
    WareTable,
    StatusDialog,
    ImportExcel
  },
  data () {
    return {
      page: {
        name: '',
        current: '1',
        size: 10,
        areaName: ''
      },
      status: '',
      total: '',
      tableData: [],
      loading: false,
      wareStatus: EmunList.wareStatus,
      dialogVisible: false,
      importVisible: false
    }
  },
  created () {
    this.getLocation()
  },
  methods: {
    // 获取数据
    async getLocation () {
      this.loading = true
      const res = await getLocation(this.page)
      console.log(res.records)
      this.tableData = res.records
      this.total = res.total
      this.loading = false
    },
    // 重置
    resetPag () {
      this.page = {
        name: '',
        status: '',
        current: '1',
        size: 10,
        warehouseName: ''
      }
    },
    // 搜索
    async searchPag () {
      this.loading = true
      const res = await getLocation({ ...this.page, status: this.status })
      console.log(res.records)
      this.tableData = res.records
      this.total = res.total
      this.loading = false
    },
    // 启用
    StatusShow (row) {
      this.dialogVisible = true
      this.$refs.StatusDialog.row = row
    },
    /* 分页 */
    updateuCrrent (val) {
      this.page.current = val
      this.getLocation()
    },
    updateSize (val) {
      this.page.size = val
      this.getLocation()
    },
    // 导出excel
    async exportExcel () {
      const excel = await import('@/vendor/Export2Excel')
      // 表头
      const tHeader = Object.keys(locationEmun.exportArea)
      // 获取信息
      const { records } = await getLocation({ ...this.page, size: this.total })
      const data = records.map(item => {
        return tHeader.map(val => {
          // 获取内层数据
          const value = item[locationEmun.exportArea[val]]
          if (val === '温度类型') return areaEmun.temperatureType.find(e => e.value === value)?.label
          if (val === '承重类型') return areaEmun.bearingType.find(e => e.value === value)?.label
          if (val === '用途属性') return areaEmun.useType.find(e => e.value === value)?.label
          if (val === '停用状态') {
            return EmunList.wareStatus.find(e => e.value === value.toString())?.label
          }
          return value
        })
      })
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: '库位模板'
      })
    },
    // 导入
    importExcel () {
      this.importVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .penpel {
    @include penpel;
  }
  .header {
    @include header;
    .label {
      @include label;
    }
    .labelbutton {
      text-align: right;
      .searchbutton {
        @include searchbutton;
      }
      .resetbutton {
        @include resetbutton;
      }
    }
  }
  .content {
    @include content;
    .addbutton {
      @include addbutton;
    }
    .resetbutton{
      @include resetbutton;
      margin: 20px 20px 20px 0;
    }
  }
</style>
